<script setup lang="ts">
import Home from './view/Home.vue'
import List from './view/List.vue'
import { ref } from 'vue'
const pages = [Home, List]
const value = ref(0)
const tabs = [
  {
    icon: 'mdi-nintendo-game-boy',
    color: 'red',
    name: ''
  },
  {
    icon: 'mdi-format-list-bulleted-type',
    color: 'teal',
    name: ''
  },
  {
    icon: 'mdi-book',
    color: 'brown',
    name: ''
  },
]
</script>

<template>
  <VApp>
    <component :is="pages[value]" class="d-flex flex-column" style="height: calc(100vh - 56px);"></component>
    <v-bottom-navigation v-model="value" :bg-color="tabs[value].color">
      <v-btn v-for="item in tabs">
        <v-icon>{{ item.icon }}</v-icon>
        <span>{{ item.name }}</span>
      </v-btn>
    </v-bottom-navigation>
  </VApp>
</template>

<style lang="css"></style>